<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title></title>
    <style type="text/css">
        body, div, span, ul, li, img, p, h2 {
            margin: 0;
            padding: 0;
            font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif;
            font-size: 14px;
            -webkit-user-select: none;
        }

        ul, li {
            list-style: none;
        }

        img {
            border: none;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .top, .bottom {
            position: absolute;
            left: 0;
            z-index: 10;
            width: 100%;
            height: 50px;
            background: #08BECE;
        }

        .top {
            top: 0;
        }

        .bottom {
            bottom: 0;
        }

        .center {
            margin: 50px 10px;
        }

        .center li {
            position: relative;
            padding-top: 10px;
            height: 60px;
            border-bottom: 1px dashed #ccc;
        }

        .center li .logo {
            position: absolute;
            left: 0;
            top: 10px;
            width: 50px;
            height: 50px;
            background: #ccc;
        }

        .center li .logo img {
            width: 100%;
            height: 100%;
        }

        .center li .title {
            margin: 0 0 0 60px;
            height: 50px;
        }

        .center li .title h2 {
            height: 20px;
            line-height: 20px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .center li .title p {
            height: 30px;
            line-height: 18px;
            font-size: 12px;
            color: #999;
        }
    </style>
</head>
<body>
<div class="top"></div>
<div class="center" id="scroll">
    <ul>
        <li>
            <div class="logo" trueImg="img/banner1.jpg"></div>
            <div class="title">
                <h2>媒体"习马会"将会改变历史的未来媒体"习马会"将会改变历史的未来</h2>

                <p>媒体"习马会"将会改变历史的未来媒体"习马会</p>
            </div>
        </li>
        <li>
            <div class="logo"></div>
            <div class="title">
                <h2>媒体"习马会"将会改变历史的未来媒体"习马会"将会改变历史的未来</h2>

                <p>媒体"习马会"将会改变历史的未来媒体"习马会</p>
            </div>
        </li>
        <li>
            <div class="logo"></div>
            <div class="title">
                <h2>媒体"习马会"将会改变历史的未来媒体"习马会"将会改变历史的未来</h2>

                <p>媒体"习马会"将会改变历史的未来媒体"习马会</p>
            </div>
        </li>
        <li>
            <div class="logo"></div>
            <div class="title">
                <h2>媒体"习马会"将会改变历史的未来媒体"习马会"将会改变历史的未来</h2>

                <p>媒体"习马会"将会改变历史的未来媒体"习马会</p>
            </div>
        </li>
        <li>
            <div class="logo"></div>
            <div class="title">
                <h2>媒体"习马会"将会改变历史的未来媒体"习马会"将会改变历史的未来</h2>

                <p>媒体"习马会"将会改变历史的未来媒体"习马会</p>
            </div>
        </li>
        <li>
            <div class="logo"></div>
            <div class="title">
                <h2>媒体"习马会"将会改变历史的未来媒体"习马会"将会改变历史的未来</h2>

                <p>媒体"习马会"将会改变历史的未来媒体"习马会</p>
            </div>
        </li>
        <li>
            <div class="logo"></div>
            <div class="title">
                <h2>媒体"习马会"将会改变历史的未来媒体"习马会"将会改变历史的未来</h2>

                <p>媒体"习马会"将会改变历史的未来媒体"习马会</p>
            </div>
        </li>
        <li>
            <div class="logo"></div>
            <div class="title">
                <h2>媒体"习马会"将会改变历史的未来媒体"习马会"将会改变历史的未来</h2>

                <p>媒体"习马会"将会改变历史的未来媒体"习马会</p>
            </div>
        </li>
        <li>
            <div class="logo"></div>
            <div class="title">
                <h2>媒体"习马会"将会改变历史的未来媒体"习马会"将会改变历史的未来</h2>

                <p>媒体"习马会"将会改变历史的未来媒体"习马会</p>
            </div>
        </li>
        <li>
            <div class="logo"></div>
            <div class="title">
                <h2>媒体"习马会"将会改变历史的未来媒体"习马会"将会改变历史的未来</h2>

                <p>媒体"习马会"将会改变历史的未来媒体"习马会</p>
            </div>
        </li>
        <li>
            <div class="logo"></div>
            <div class="title">
                <h2>媒体"习马会"将会改变历史的未来媒体"习马会"将会改变历史的未来</h2>

                <p>媒体"习马会"将会改变历史的未来媒体"习马会</p>
            </div>
        </li>
        <li>
            <div class="logo"></div>
            <div class="title">
                <h2>媒体"习马会"将会改变历史的未来媒体"习马会"将会改变历史的未来</h2>

                <p>媒体"习马会"将会改变历史的未来媒体"习马会</p>
            </div>
        </li>
        <li>
            <div class="logo"></div>
            <div class="title">
                <h2>媒体"习马会"将会改变历史的未来媒体"习马会"将会改变历史的未来</h2>

                <p>媒体"习马会"将会改变历史的未来媒体"习马会</p>
            </div>
        </li>
        <li>
            <div class="logo"></div>
            <div class="title">
                <h2>媒体"习马会"将会改变历史的未来媒体"习马会"将会改变历史的未来</h2>

                <p>媒体"习马会"将会改变历史的未来媒体"习马会</p>
            </div>
        </li>
        <li>
            <div class="logo"></div>
            <div class="title">
                <h2>媒体"习马会"将会改变历史的未来媒体"习马会"将会改变历史的未来</h2>

                <p>媒体"习马会"将会改变历史的未来媒体"习马会</p>
            </div>
        </li>
        <li>
            <div class="logo"></div>
            <div class="title">
                <h2>媒体"习马会"将会改变历史的未来媒体"习马会"将会改变历史的未来</h2>

                <p>媒体"习马会"将会改变历史的未来媒体"习马会</p>
            </div>
        </li>
        <li>
            <div class="logo"></div>
            <div class="title">
                <h2>媒体"习马会"将会改变历史的未来媒体"习马会"将会改变历史的未来</h2>

                <p>媒体"习马会"将会改变历史的未来媒体"习马会</p>
            </div>
        </li>
        <li>
            <div class="logo"></div>
            <div class="title">
                <h2>媒体"习马会"将会改变历史的未来媒体"习马会"将会改变历史的未来</h2>

                <p>媒体"习马会"将会改变历史的未来媒体"习马会</p>
            </div>
        </li>
        <li>
            <div class="logo"></div>
            <div class="title">
                <h2>媒体"习马会"将会改变历史的未来媒体"习马会"将会改变历史的未来</h2>

                <p>媒体"习马会"将会改变历史的未来媒体"习马会</p>
            </div>
        </li>
        <li>
            <div class="logo"></div>
            <div class="title">
                <h2>媒体"习马会"将会改变历史的未来媒体"习马会"将会改变历史的未来</h2>

                <p>媒体"习马会"将会改变历史的未来媒体"习马会</p>
            </div>
        </li>
        <li>
            <div class="logo"></div>
            <div class="title">
                <h2>媒体"习马会"将会改变历史的未来媒体"习马会"将会改变历史的未来</h2>

                <p>媒体"习马会"将会改变历史的未来媒体"习马会</p>
            </div>
        </li>
    </ul>
</div>
<div class="bottom"></div>

<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript">
    var scroll = document.querySelector("#scroll");
    scroll.style.height = document.documentElement.clientHeight - 100 + "px";
    //在使用iscroll的时候需要组织页面的默认行为
    document.addEventListener('touchmove', function (e) {
        e.preventDefault();
    }, false);
//    new IScroll("#scroll", {scrollbars: true});
//    var scrollBar = document.querySelector(".iScrollVerticalScrollbar");
//    scrollBar ? scrollBar.style.zIndex = 0 : null;


        var scrollIs = new IScroll("#scroll", {
            mouseWheel: false,//是否支持鼠标滚轮滚动
            scrollbars: true, //是否显示滚动条
            useTransform: true,
            useTransition: true, //设置使用css3动画来实现滚动
            momentum: true,//是否打开拖动惯性，在用户快速触摸屏幕时,可以开/关势能动画,关闭此功能将大幅度提升性能
            tap: true, //是否允许用户在点击里面的内容
            bounce: true,
            bounceEasing: 'elastic',
            bounceTime: 1200 //到边界后是否有缓冲的动画
        });

        //我们自己修改滚动条的样式
        var scrollBar = document.querySelector(".iScrollVerticalScrollbar");
        if (scrollBar) {
            scrollBar.style.zIndex = 0;
        }

    function loadImg() {
        var oLis = scroll.querySelectorAll(".logo");
        for (var i = 0; i < oLis.length; i++) {
            ~function (i) {
                var oImg = new Image;
                oImg.src = oLis[i].getAttribute("trueImg") || "img/banner1.jpg";
                oImg.onload = function () {
                    oLis[i].appendChild(oImg);
                }
            }(i);
        }
    }

    window.addEventListener("load", function () {
        window.setTimeout(loadImg, 1000);
    }, false);


</script>
</body>
</html>